<template>
  <a-menu-item
    @click.native="to_path(item)"
    :key="item.path"
    v-if="!hasChild(item)"
  >
    <component v-if="item.meta.icon" :is="item.meta.icon"></component>
    <span class="a_link">{{ item.meta.title }}{{ item.path }}</span>
  </a-menu-item>
  <a-sub-menu :key="item.path" v-else>
    <template @click.native="to_path(item)" #title>
      <component v-if="item.meta.icon" :is="item.meta.icon"></component>
      <span class="a_link">{{ item.meta.title }}{{ item.path }}</span>
    </template>
    <menu-tree v-for="item1 in item.children" :key="item1.path" :item="item1">
    </menu-tree>
  </a-sub-menu>
</template>

<script lang="ts">
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
type item = {
  path: string;
  name: string;
  component?: string;
  redirect?: string;
  meta: {
    icon?: string;
    title: string;
    cache?: false;
    show?: true;
    is_ip?: boolean;
  };
  children?: [];
};
export default {
  props: {
    item: {
      type: Object,
    },
    show_title: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  },
  setup() {
    const router = useRouter();
    const to_path = function (item: item) {
      if (item.meta.is_ip) {
        window.open(item.path);
      } else {
        router.push(item.path);
      }
    };
    return {
      to_path,
      onlyOneChild: {},
    };
  },
  beforeCreate() {
    this.onlyOneChild = {};
  },
  methods: {
    hasChild(item: item) {
      if (Array.isArray(item.children) && item.children.length > 1) {
        return true;
      } else {
        this.onlyOneChild = item;
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
@import "@/layout/theme.scss";
// .ant-menu-item {
//   @include theme;
// }
.ant-menu-submenu-title {
  @include theme;
}
.menuTree_center {
  padding-left: 60px;
}
.a_lick {
  &:hover {
    cursor: pointer;
  }
}
</style>
